<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="false"
      :background="{ background: '#fff' }"
      title="洗衣服务"
      title-color="#000"
    >
    </u-navbar>
    <u-swiper height="400" :list="list"></u-swiper>
    <view class="circles">
      <view class="circle" v-for="item in typeList" @click="toSub(item)">
        <image class="img" :src="item.image" />
        <view class="text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          image: "/static/images/swiper/swiper1.jpg",
        },
        {
          image: "/static/images/swiper/swiper2.jpg",
        },
      ],
      typeList: [
        {
          text: "大衣外套",
          image: "/static/images/stages/大衣外套.png",
        },
        {
          text: "裤装裙装",
          image: "/static/images/stages/裤装裙装.png",
        },
        {
          text: "上衣",
          image: "/static/images/stages/上衣.png",
        },
        {
          text: "配件",
          image: "/static/images/stages/配件.png",
        },
      ],
    };
  },
  methods: {
    toSub(type) {
      console.log(type);
      this.$u.route("/pages/manage/stage", {
        type: type.text,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow: hidden;

  .content {
    padding: 20rpx;
  }
}
.header {
  width: 100%;
  height: 500rpx;
  .image {
    width: 100%;
    height: 100%;
  }
}

.menus {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .menu {
    width: 90vw;
    margin: 5vw;
    padding: 20rpx;
    margin-top: 30rpx;
    display: flex;
    background: #e5dddd;
    border-radius: 10rpx;
    height: 15vh;
    .text {
      font-weight: bold;
      font-size: 40rpx;
      color: #fff;
      line-height: 13vh;
      padding-left: 16%;
    }
  }
}
.circles {
  padding: 20rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .circle {
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-top: 100rpx;
    .img {
      width: 100rpx;
      height: 100rpx;
      margin-left: calc(50% - 50rpx);
    }
    .text {
      width: 100%;
      text-align: center;
      margin-top: 24rpx;
      font-weight: bold;
    }
  }
}
</style>
